<script setup lang="ts">
import { getCurrentInstance, ref, reactive } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const code = reactive({
  info: '获取验证码',
  count: 60,
  isClick: false
})
const form = reactive({
  telphone: logUser.telphone,
  smscode: ''
})

/* ---- */
const layer = ref()
const layerLoading = ref()

/* ---- */
const forTime = () => {
  code.isClick = !code.isClick
  const timer = () => {
    if (code.count > 0) {
      const forCount = code.count < 10 ? '0' + code.count : code.count
      code.info = forCount + '秒后重发'
      code.count--
      setTimeout(timer, 1000)
    } else {
      code.info = '获取验证码'
      code.count = 60
      code.isClick = !code.isClick
    }
  }
  timer()
}
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
}
const getAuditFun = (type) => {
  switch (Number(type)) {
    case 1: {
      if (code.isClick) return false
      // ----
      proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
      proxy.$http.post('wechat/get-mobile-code', {
        telphone: form.telphone,
        is_reg_check: 1,
        SmsType: 3,
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }).then((res) => {
        proxy.$Myfun.disLoading(layerLoading.value, 'close')
        if (res.success) {
          forTime()
        } else { proxy.$Myfun.forToast(layer.value, 'open', res.message) }
      }).catch((err) => {
        proxy.$Myfun.disLoading(layerLoading.value, 'close')
        proxy.$Myfun.forToast(layer.value, 'open', err)
      })
      break
    }
  }
}
// ----
const subform = async () => {
  if (Number(form.smscode.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '请填写获取的验证码！')
    return false
  }
  // ----
  const forType = 'post'
  const forUrl = 'wechat/update-userinfo'
  const forData = {
    telphone: form.telphone,
    smscode: form.smscode,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  // ----
  let resData = ''
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  await proxy.$http[forType](forUrl, forData).then((res) => {
    if (res.success && res.datainfo) {
      resData = res.datainfo
    } else { proxy.$Myfun.forToast(layer.value, 'open', res.message) }
  }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
  if (resData) proxy.$Myfun.openPage(proxy, 'replace', 'TelphoneAdmNext')
}
const goback = () => { proxy.$router.back() }

/* ---- */
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="formSet">
      <ul>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>原手机号</i>
            <p class="xw-flex-W1">{{form.telphone}}</p>
          </div>
        </li>
        <li class="xw-flex xw-flex-align">
          <div class="form-txt xw-radius-3 xw-flex-W1 xw-flex xw-flex-align">
            <i>短信验证</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.smscode"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.smscode"></em></transition>
          </div>
          <span class="xw-radius-3" :class="[code.isClick ? 'form-btn-time' : 'form-btn xw-WBlue']" @click="getAuditFun(1)">{{code.info}}</span>
        </li>
      </ul>
      <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">下一步</div>
      <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
    </div>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>